<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $username = $('#username');
            $username.focus(function () {
                $(this).val('xsweid');
            });

            var $ali = $('ul#list');
            // 事件代理
            $ali.on('click', 'li', function () {
                // this指的是触发事件的子标签
                $(this).css({'background': 'red'});
            });
        })
    </script>
</head>
<body>
<form action="#">
    <div>
        <label for="username">登录账号:</label>
        <input type="text" id="username" name="username" placeholder="登录账号">
    </div>
    <div>
        <label for="password">登录密码:</label>
        <input type="password" id="password" name="password" placeholder="登录密码">
    </div>
    <div>
        <button type="submit" id="submit" name="submit">登录</button>
    </div>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</form>
</body>
</html>